<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="admin/module/macros :: head('活动管理')"></div>
<body class="app sidebar-mini rtl">
    <div th:replace="admin/module/macros :: header"></div>
    <div th:replace="admin/module/macros :: sidebar"></div>
    <main class="app-content">
        <div class="app-title">
            <div>
                <h1><i class="fa fa-calendar"></i> 活动管理</h1>
                <p>管理和发布各类活动</p>
            </div>
            <ul class="app-breadcrumb breadcrumb">
                <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
                <li class="breadcrumb-item"><a href="#">活动管理</a></li>
            </ul>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="tile">
                    <div class="tile-title-w-btn">
                        <h3 class="title">全部活动</h3>
                        <p>
                            <a class="btn btn-primary icon-btn" href="/admin/activities/new">
                                <i class="fa fa-plus"></i>新增活动
                            </a>
                        </p>
                    </div>
                    <div class="tile-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th width="200">封面</th>
                                        <th>活动名称</th>
                                        <th>地点</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${activities.isEmpty()}">
                                        <td colspan="7" style="text-align:center">暂无活动信息</td>
                                    </tr>
                                    <tr th:each="activity : ${activities}">
                                        <td th:text="${activity.activityId}"></td>
                                        <td>
                                            <img th:if="${activity.coverImage != null}" th:src="${activity.coverImage}" style="max-width: 100%; max-height: a100px;">
                                            <span th:unless="${activity.coverImage != null}">无封面</span>
                                        </td>
                                        <td th:text="${activity.activityName}"></td>
                                        <td th:text="${activity.activityAddress ?: '未设置'}"></td>
                                        <td th:text="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm')}"></td>
                                        <td th:text="${activity.endTime != null ? #dates.format(activity.endTime, 'yyyy-MM-dd HH:mm') : '未设置'}"></td>
                                        <td>
                                            <a class="btn btn-sm btn-info" th:href="@{'/admin/activities/edit/' + ${activity.activityId}}">
                                                <i class="fa fa-edit"></i> 编辑
                                            </a>
                                            <a class="btn btn-sm btn-primary" th:href="@{'/admin/activities/participants/' + ${activity.activityId}}">
                                                <i class="fa fa-users"></i> 参与者
                                            </a>
                                            <button class="btn btn-sm btn-danger delete-btn" th:data-id="${activity.activityId}">
                                                <i class="fa fa-trash"></i> 删除
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div th:replace="admin/module/macros :: copyright"></div>
    <div th:replace="admin/module/macros :: bootstrap"></div>
    <script>
        $(document).ready(function() {
            // 删除活动
            $('.delete-btn').click(function() {
                var activityId = $(this).data('id');
                var row = $(this).closest('tr');
                
                swal({
                    title: "确定要删除这个活动吗？",
                    text: "删除后将无法恢复，且所有相关的参与记录也将删除！",
                    icon: "warning",
                    buttons: ["取消", "确定"],
                    dangerMode: true
                }).then((willDelete) => {
                    if (willDelete) {
                        $.ajax({
                            url: '/admin/activities/remove',
                            type: 'POST',
                            data: {
                                id: activityId
                            },
                            success: function(result) {
                                if (result.success) {
                                    // 删除成功
                                    swal("删除成功", "活动已成功删除", "success");
                                    row.fadeOut(400, function() {
                                        row.remove();
                                    });
                                } else {
                                    // 删除失败
                                    swal("删除失败", result.msg, "error");
                                }
                            },
                            error: function() {
                                swal("操作失败", "请求发生错误，请重试", "error");
                            }
                        });
                    }
                });
            });
        });
    </script>
</body>
</html>
